<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var pics=["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg"];
			var i=1;
			function shiftPic()
			{
				var im=document.getElementById("adv");
				//im.setAttribute("src","../img/2.jpg");
				im.setAttribute("src",pics[++i]);
				im.setAttribute("style","border:4px solid red");
				if(i>=3)
				{
					i=0;
				}
			}
			function addPic()
			{
				var m=document.createElement("img");
				m.setAttribute("src","../img/autumn.jpg");
				m.setAttribute("height","400px");
				m.setAttribute("width","400px");
				
				document.getElementById("pics").appendChild(m);
			}
			function addPic2()
			{
				var m=document.createElement("img");
				m.setAttribute("src","../img/autumn.jpg");
				m.setAttribute("height","200px");
				m.setAttribute("width","200px");
				
				var p=document.getElementById("pics");
				p.insertBefore(m,p.firstElementChild);
				
				
			}
			function clonePic()
			{
					var p=document.getElementById("pics").cloneNode(true);
					document.body.appendChild(p);
			}
			function delLast()
			{
				document.body.removeChild(document.body.lastElementChild);
				
			}
		</script>
	</head>
	<body>
		<div id="pics" style="border: 5px dotted green;">
			<img src="../img/1.jpg" id="adv"/>
		</div>
		<input type="button" value="换图" onclick="shiftPic()"/>
		
		<input type="button" value="加图" onclick="addPic()"/>
		
		<input type="button" value="加图在原来的前面" onclick="addPic2()"/>
		
		<input type="button" value="克隆图片div" onclick="clonePic()"/>
		
		<input type="button" value="删除最后一个元素" onclick="delLast()"/>
	</body>
</html>
